<template>
  <div class="publicize-my-order-detail">
    <div v-loading="loading">
      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">课程名称：</el-col>
        <el-col :span="21">{{ indentDetail.courseName }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">专家：</el-col>
        <el-col :span="21">{{ expertDetail.name }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">预约时间：</el-col>
        <el-col :span="21">{{ format(indentDetail.appointTime) }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">预约时段：</el-col>
        <el-col :span="21">{{ indentDetail.timeType == 0 ? '上午' : '下午' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">地点：</el-col>
        <el-col :span="21">{{ indentDetail.location }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">听众人数：</el-col>
        <el-col :span="21">{{ indentDetail.listenerCount }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">联系人：</el-col>
        <el-col :span="21">{{ indentDetail.linkMan }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">联系人电话：</el-col>
        <el-col :span="21">{{ indentDetail.linkManTel }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">预约状态：</el-col>
        <el-col :span="21">{{ indentDetail.status == 0 ? '待确认' : indentDetail.status == 1 ? '已确认' : '已拒绝' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">审核状态：</el-col>
        <el-col :span="21">{{ indentDetail.auditStatus == 0 ? '待审核' : indentDetail.auditStatus == 1 ? '审核通过' :
          indentDetail.auditStatus == 2 ? '审核未通过' : '' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">预约说明：</el-col>
        <el-col :span="21">{{ indentDetail.appointDescribe }}</el-col>
      </el-row>
    </div>

    <div class="button">
      <el-button type="primary" @click="router.push('/personal-center/myorder')" style="color: #8B8B8B;" text bg>返
        回</el-button>
    </div>
  </div>
</template>
<script>
export default { name: 'personalCenterMyorderDetail' }
</script>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { http } from '@/utils/http/index.js'
import { format } from '@/plugins/moment.js'

const router = useRouter()

onMounted(() => {
  getIndentDetail()
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const indentDetail = ref({})
const expertDetail = ref({})

/* 获取详情内容 */
const getIndentDetail = () => {
  loading.value = true
  http.$GET("/Preach/GetPreachOrderDetail", { Id: router.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if (!res.result) return
    indentDetail.value = res.result.order
    expertDetail.value = res.result.expert
  }).catch(() => {
    loading.value = false
  })
}

</script>

<style lang="scss" scoped>
.publicize-my-order-detail {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  padding: 32px 36px;
  position: relative;

  .detail-item {
    margin-bottom: 8px;
    word-wrap: break-word;

    .detail-label {
      text-align: right;
    }
  }

  .button {
    text-align: center;
    position: absolute;
    bottom: 40px;
    left: 50%;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }
}
</style>